<template>
    <div>

        <div class="unified-top-fit">
            <div class="box-head flex unified-flex-space-between ">
                <span class="box-head-title"><i class="el-icon-info unified-icon-interval"></i>基本信息</span>
            </div>

            <div class="base unified-bg-white unifined-border-radius unified-add-form">

                <basic>

                    <el-select slot="select" v-model="form.type" placeholder="请选择商品类目">
                        <el-option v-for="item in goods_type_list" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>

                    <el-input slot="default" v-model="form.title" placeholder="请输入商品的标题"></el-input>

                </basic>
            </div>



            <tableMake title="预览图/视频" icon="el-icon-picture"></tableMake>

            <div class="preview unified-bg-white unifined-border-radius unified-add-form">

                <banner :list="form.banner"></banner>

            </div>

            <tableMake title="商品属性" icon="el-icon-menu"></tableMake>

            <div class="parameter unified-bg-white unifined-border-radius unified-add-form">

                <parameter :list="form.parameter" @add="addParameter" @remove="removeParamter"></parameter>

            </div>

            <tableMake title="销售规格" icon="el-icon-shopping-bag-1"></tableMake>
            <div class="specs  unified-bg-white unifined-border-radius unified-add-form">
                <specs :list="form.specs" @add="addSpecs" @remove="removeSpecs"></specs>
            </div>

            <tableMake title="测评信息" icon="el-icon-video-play"></tableMake>
            <div class="review  unified-bg-white unifined-border-radius unified-add-form">
                <review></review>
            </div>

            <tableMake title="物流信息" icon="el-icon-truck"></tableMake>
            <div class="transport unified-bg-white unifined-border-radius unified-add-form">

                <transportd>

                    <el-select slot="select" v-model="form.transport" placeholder="请选择物流模板">
                        <el-option v-for="item in goods_transport_list" :key="item._id" :label="item.name"
                            :value="item._id">
                        </el-option>
                    </el-select>


                </transportd>
            </div>

            <tableMake title="发布" icon="el-icon-finished "></tableMake>
            <div class="release unified-bg-white unifined-border-radius unified-add-form">
                <release @release="release" @change="read=!read"></release>
            </div>
        </div>

    </div>
</template>

<script>
    // import collect from './collect.vue'
    // import menu from '../../components/menu/menu.vue'

    // 引入基本信息填写页面
    import basic from './compotents/goods/basic.vue'
    // 引入物流页面
    import transportd from './compotents/goods/transport.vue'
    // 引入发布页面
    import release from './compotents/goods/release.vue'
    // 引入参数信息页面
    import parameter from './compotents/goods/parameter.vue'
    // 引入销售规格页面
    import specs from './compotents/goods/specs.vue'
    // 引入Banner页面
    import banner from './compotents/goods/preview.vue'
    // 引入测评信息页面
    import review from './compotents/goods/review.vue'

    export default {
        components: {
            basic,
            transportd,
            release,
            parameter,
            specs,
            banner,
            review
        },
        data() {
            return {
                // 页面模式 add添加商品 edit修改商品
                mode: "add",
                // API地址
                api: this.$api.goods,
                // 菜单选择项
                menuIndex: 0,
                // 菜单项
                menu: [{
                        name: "基本信息",
                        ref: "base"
                    },
                    {
                        name: "商品参数",
                        ref: "parameter"
                    },

                    {
                        name: "销售规格",
                        ref: "specs"
                    },
                    {
                        name: "物流信息",
                        ref: "transport"
                    },
                    {
                        name: "测评信息",
                        ref: "review"
                    },
                    {
                        name: "发布",
                        ref: "release"
                    }
                ],
                // 商品类目数据
                goods_type_list: [],
                // 物流模板数据
                goods_transport_list: [],
                // 添加商品的数据
                form: {
                    type: "", // 类目
                    title: "", // 商品标题
                    transport: "", // 物流模板
                    parameter: [], // 参数信息
                    banner:[
                        {
                                file: "", // 文件对象
                                title: "主图", // 展示标题
                                file_url: "", // 文件本地地址
                                file_name: "", // 文件名称
                                file_type: "", // 文件类型
                                file_size: "", // 文件大小
                                upload: false,
                                status: false // 是否已选择了文件  true已选择 false未选择
                            },
                            {
                                file: "", // 文件对象
                                title: "展示图", // 展示标题
                                file_url: "", // 文件本地地址
                                file_name: "", // 文件名称
                                file_type: "", // 文件类型
                                file_size: "", // 文件大小
                                upload: false, // 上传到服务器的状态
                                status: false // 是否已选择了文件  true已选择 false未选择
                            },
                            {
                                file: "", // 文件对象
                                title: "展示图", // 展示标题
                                file_url: "", // 文件本地地址
                                file_name: "", // 文件名称
                                file_type: "", // 文件类型
                                file_size: "", // 文件大小
                                upload: false, // 上传到服务器的状态
                                status: false // 是否已选择了文件  true已选择 false未选择
                            },
                            {
                                file: "", // 文件对象
                                title: "展示图", // 展示标题
                                file_url: "", // 文件本地地址
                                file_name: "", // 文件名称
                                file_type: "", // 文件类型
                                file_size: "", // 文件大小
                                upload: false, // 上传到服务器的状态
                                status: false // 是否已选择了文件  true已选择 false未选择
                            },
                            {
                                file: "", // 文件对象
                                title: "展示图", // 展示标题
                                file_url: "", // 文件本地地址
                                file_name: "", // 文件名称
                                file_type: "", // 文件类型
                                file_size: "", // 文件大小
                                upload: false, // 上传到服务器的状态
                                status: false // 是否已选择了文件  true已选择 false未选择
                            }
                    ],
                    specs: [] ,// 销售规格
                    review:{    // 测评信息
                        user:null,  // 测评人员
                        title: '',   // 测评标题
                        stars: '', // 打分
                        specs: '',  // 规格
                        date2: '',  // 测评
                        reviewTime: null,    // 测评时间
                        report: [],           // 测评报告
                        comment: '',       // 补充说明
                        status: 0            // 测评状态
                    },
                    status: 0, // 状态
                },
                // 阅读商品管理条款
                read: false

            }
        },

        mounted() {
            // 获取商品类目
            this.$axios({
                url: this.api,
                method: "GET",
                params: {
                    action: "type",
                    params: {}
                }
            }).then(res => {
                if (res.data.code == 0) {

                    this.goods_type_list = res.data.data

                    return this.$axios({
                        url: this.$api.transport,
                        method: "GET",
                        params: {
                            action: "list",
                            params: {}
                        }
                    })
                }

            }).then(transport => {
                if (transport.data.code == 0) {
                    this.goods_transport_list = transport.data.data
                } else {
                    return {
                        tips: "Transport Error",
                        error: transport
                    }
                }
            }).catch(err => {
                console.log(err);
            })
        },

        methods: {
            // 点击上传文件
            uploadBanner(index){
                console.log(index);
            },
            // 添加一个轮播图
            addBanner(index){
                console.log(index);
            },
            // 删除一个轮播图
            removeBanner(index){
                console.log(index);
            },
            // 添加销售规格
            addSpecs() {
                this.form.specs.push({
                    name: "", // 规格名称
                    price: null, // 销售价格
                    company: "", // 单位
                    stock: null, // 库存数量
                    store_code: null, // 商家编码
                    bar_code: null, // 条形码
                })
            },
            // 删除一个销售规格
            removeSpecs(index) {
                this.form.specs.splice(index, 1)
            },
            // 添加商品属性
            addParameter() {
                this.form.parameter.push({
                    key: "", // 参数名称
                    type: "text", // 模板输入类型
                    value: "", // 模板默认内容
                    found: 1, // 该属性的建立方式 0为模板属性  1为自定义属性
                    status: 0 // 状态 0 为正常 	1为关闭
                })
            },
            // 删除商品属性
            removeParamter(index) {
                this.form.parameter.splice(index, 1)
            },
            // 点击了发布
            release() {
                if (!this.form.type) { // 是否选择了分类
                    this.$message.error("请选择商品分类")
                } else if (!this.form.title) { // 是否输入了标题
                    this.$message.error("请输入商品的标题")
                } else if (!this.form.specs.length) { // 是否同意了发布条例
                    this.$message.error("请添加一个商品销售规格")
                } else if (!this.read) { // 是否同意了发布条例
                    this.$message.error("请同意商品发布条款")
                } else {
                    // 提交发布
                    this.$axios({
                        url: this.api,
                        method: "POST",
                        data: {
                            action: "release",
                            params: {
                                type: this.form.type, // 商品分类
                                title: this.form.title, // 商品标题
                                parameter: this.form.parameter, // 属性列表
                                specs: this.form.specs, // 销售规格列表
                                status: this.form.status // 商品状态
                            }
                        }
                    }).then(res => {
                        console.log(res.data);
                        if (res.data.code == 0) {
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                }
            }
        }
    }
</script>

<style>
    .view {
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 20px;
        flex-direction: column;
        overflow-y: auto;
    }

    * /deep/ .el-select {
        width: 100%;
    }
</style>
